<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/sms/coupon' }">
                    订单
                </el-breadcrumb-item>
                <el-breadcrumb-item>退货原因详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <div class="card">
        <el-card class="box-card">
            <el-steps :active="active" align-center style="width: 90%; margin: 0 auto;" finish-status="success">
                <el-step title="提交订单" :description="getDate(objDate.createTime)" />
                <el-step title="支付订单" :description="getDate(objDate.paymentTime)" />
                <el-step title="平台发货" :description="getDate(objDate.receiveTime)" />
                <el-step title="确认收货" :description="getDate(objDate.deliveryTime)" />
                <el-step title="完成评价" :description="getDate(objDate.commentTime)" />
            </el-steps>
            <div
                style="display: flex;justify-content: space-between; margin-top: 20px;padding: 10px; height: 80px; line-height: 80px;background: color #f2f6fc;;">
                <span style="color: red;">
                    <el-icon>
                        <Warning />
                    </el-icon>
                    <span>
                        当前订单状态：已关闭
                    </span>
                </span>
                <div>
                    <el-button>删除订单</el-button>
                    <el-button>备注订单</el-button>
                </div>
            </div>
            <div>
                <div style="margin: 20px;">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    基本信息
                </div>

                <el-table :data="tableItems" border style="width: 100%">
                    <el-table-column prop="orderSn" class="el-col-4" label="订单编号" />
                    <el-table-column label="发货流水线" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.billReceiverPhone == null ? "暂无" : scope.row.billReceiverPhone }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="memberUsername" class="el-col-4" label="用户账户" />
                    <el-table-column label="支付方式" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.billType == null ? "未支付" : scope.row.billType }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单来源" class="el-col-4">
                        <template #default="scope">
                            <div>App订单</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单类型" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.orderType === 0 ? "正常类型" : "其他类型" }}</div>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table :data="tableItems" border style="width: 100%">
                    <el-table-column label="配送方式" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.ProprotionInfo == null ? "暂无" : scope.row.billReceiverPhone }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="物流单号" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.integrationAmount == 0 ? "暂无" : scope.row.billType }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="自动收货时间" class="el-col-4">
                        <template #default="scope">
                            <div>{{ scope.row.autoConfirmDay }}天</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="integration" label="订单可得优币" class="el-col-4" />
                    <el-table-column prop="integration" label="订单可得值" class="el-col-4" />
                    <el-table-column prop="promotionInfo" label="活动信息" class="el-col-4" :show-overflow-tooltip="true" />
                </el-table>
                <div style="margin: 20px;">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    收货人信息
                </div>
                <el-table :data="tableItems" border style="width: 100%">

                    <el-table-column prop="receiverName" label="收货人" class="el-col-3" />
                    <el-table-column prop="receiverPhone" label="手机号" class="el-col-3" />
                    <el-table-column prop="receiverPostCode" label="邮政编码" class="el-col-3" :show-overflow-tooltip="true" />
                    <el-table-column label="收货地址" class="el-col-3">
                        <template #default="scope">
                            <div>{{ scope.row.receiverProvince }}{{ scope.row.receiverCity }}{{ scope.row.receiverRegion
                            }}{{ scope.row.receiverDetailAddress }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin: 20px;">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    商品信息
                </div>
                <el-table :data="goodslist" border style="width: 100%">
                    <el-table-column label="商品信息">
                        <template #default="scope">
                            <div>
                                <el-image style="width: 100px; height: 100px" :src="scope.row.productPic" fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称">
                        <template #default="scope">
                            <div>
                                {{ scope.row.productName }}
                            </div>
                            <div>品牌：{{ scope.row.productBrand }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="价格/货号" width="180">
                        <template #default="scope">
                            <div>价格：￥{{ scope.row.productPrice }}</div>
                            <div>货号：{{ scope.row.productSn }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性" width="180">
                        <template #default="scope">
                            <div>{{ scope.row.productAttr }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productQuantity" label="数量" width="100" />
                    <el-table-column label="小计" width="105">
                        <template #default="scope">
                            <div>￥{{ Number(scope.row.productPrice) * Number(scope.row.productQuantity) }}</div>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="margin: 20px;">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    费用信息
                </div>

                <el-table :data="tableItems" border style="width: 100%">
                    <el-table-column label="商品合计" class="el-col-3">
                        <template #default="scope">
                            <div>￥{{ scope.row.totalAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="运费" class="el-col-3">
                        <template #default="scope">
                            <div>￥{{ scope.row.freightAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠券" class="el-col-3">
                        <template #default="scope">
                            <div>-￥{{ scope.row.couponAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="积分抵扣" class="el-col-3">
                        <template #default="scope">
                            <div>-￥{{ scope.row.confirmStatus }}</div>
                        </template>
                    </el-table-column>
                </el-table>

                <el-table :data="tableItems" border style="width: 100%">
                    <el-table-column label="活动优惠" class="el-col-3">
                        <template #default="scope">
                            <div>-￥{{ scope.row.promotionAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="折扣金额" class="el-col-3">
                        <template #default="scope">
                            <div>-￥{{ scope.row.discountAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单总金额" class="el-col-3">
                        <template #default="scope">
                            <div style="color: red;">-￥{{ scope.row.totalAmount - scope.row.discountAmount -
                                scope.row.couponAmount }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="积分抵扣" class="el-col-3">
                        <template #default="scope">
                            <div style="color: red;">-￥{{ scope.row.totalAmount - scope.row.discountAmount -
                                scope.row.couponAmount - scope.row.promotionAmount - scope.row.confirmStatus +
                                scope.row.freightAmount }}</div>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="margin: 20px;">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    操作信息
                </div>
                <el-table :data="operateManList" border style="width: 100%">
                    <el-table-column prop="operateMan" label="操作者" width="100" />
                    <el-table-column label="操作时间">
                        <template #default="scope">
                            <div>
                                {{
                                    scope.row.createTime
                                    ? dayjs(scope.row.createTime
                                    ).format('YYYY-MM-DD HH:mm:ss') : '' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" width="100">
                        <template #default="scope">
                            <div>
                                已关闭
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="付款状态" width="100">
                        <template #default="scope">
                            <div>
                                已退款
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="发货状态" width="100">
                        <template #default="scope">
                            <div>
                                已发货
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="note" label="备注" />

                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Warning, Briefcase } from "@element-plus/icons-vue";
import { Tickets, Search } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../json/request/api'
import type { Ref } from "vue"
import { Ireturnorder } from "../../json/request/QmsAdminConreiller/index"
import { useRouter, useRoute } from 'vue-router'
import type { IAddCoupon } from "../../json/request/QmsAdminConreiller/index"
import dayjs from "dayjs"
import { TypeComponents } from 'element-plus/es/utils';
const active = ref(1)
let route = useRoute()
let tableItems = ref([]) as Ref<Ireturnorder[]>
let goodslist = ref([]) as Ref<{
    couponAmountcouponAmount: string
    giftIntegration: string
    id: number
    integrationAmount: string
    orderId: number
    orderSn: string
    productAttr: [
        {
            key: string,
            value: string
        }
    ]
    productBrand: string
    productCategoryId: number
    productId: number
    productName: string
    productPic: string
    productPrice: number
    productQuantity: number
    productSkuCode: string
    productSkuId: number
    productSn: string
    promotionAmount: string
    promotionName: string
    realAmount: string,
    types?: object[]
}[]>
let operateManList = ref([]) as Ref<{
    createTime: string
    id: number
    note: string
    operateMan: string
    orderId: number
    orderStatus: number
}[]>
interface IObjDataInter {
    commentTime: string
    createTime: string
    deliveryTime: string
    modifyTime: string
    paymentTime: string
    receiveTime: string
}
let objDate = ref({}) as Ref<IObjDataInter>
(async function () {
    tableItems.value[0] = await api.admin.returnorder(Number(route.query.id))
    console.log(tableItems.value);
    goodslist.value = tableItems.value[0].orderItemList
    operateManList.value = tableItems.value[0].historyList
    active.value = tableItems.value[0].status

    objDate.value.commentTime = tableItems.value[0].commentTime
    objDate.value.createTime = tableItems.value[0].createTime
    objDate.value.deliveryTime = tableItems.value[0].deliveryTime
    objDate.value.modifyTime = tableItems.value[0].modifyTime
    objDate.value.paymentTime = tableItems.value[0].paymentTime
    objDate.value.receiveTime = tableItems.value[0].receiveTime
})()

let options = [
    {
        value: "待处理",
        label: '待处理'
    }, {
        value: "退货中",
        label: '退货中'
    }, {
        value: "已完成",
        label: '已完成'
    }, {
        value: "已拒绝",
        label: '已拒绝'
    }
]

function getDate(val: string): string {
    return val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
}
</script>

<style scoped>
.card {
    margin: 30px auto;
    margin-top: 60px;
    margin-bottom: 30px;
    width: 1080px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep .cell {
    text-align: center;
}

.card {
    widows: 80%;
    margin: 60px auto;
}

.el-col-4 {
    width: 16.66%;
}

.el-col-4 {
    width: 25%;
}
</style>